<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <meta name="viewport" content="width=device-width, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>BigBanner</title>
    <link rel="stylesheet" type="text/css" href="css/global.css">
    <link rel="stylesheet" type="text/css" href="css/loading.css">
    <style type="text/css">
        html,
        body {
            -ms-touch-action: none;
            -webkit-user-drag: none;
            max-width: 100%;
            min-height: 100%;
        }
        .main {
            position: absolute;
            width: 100%;
            top: 0;
            bottom: 0;
            overflow: hidden;
        }
        .head-cover {
            position: absolute;
            z-index: 1;
            top: 0;
            left: 0;
            width: 100%;
        }
        .head-cover span {
            transform-origin: top center;
        }

        .content {
            position: absolute;
            width: 100%;
            left: 0;
            top: 0;
            z-index: 2;
            -webkit-transform: translate3d(0, 0, 0);
        }

        .ui-placehold-img {
            width: 100%;
            -webkit-transform-origin: top center;
        }
        .ui-placehold-img>span {
            background-position: center bottom;
            background-size: 100%;
        }
    </style>
</head>
<body ontouchstart="">
<section class="main">
    <div class="ui-placehold-img head-cover">
        <span style="display: none; background-image: url('img/banner.png');"></span>
    </div>
    <section class="content">
        <section class="ui-placehold-img headImg">
            <span style="background-image: url('img/banner.png');"></span>
        </section>
        <ul>
            <li>cs</li>
            <li>cs</li>
            <li>cs</li>
            <li>cs</li>
            <li>cs</li>
            <li>cs</li>
            <li>cs</li>
            <li>cs</li>
            <li>cs</li>
            <li>cs</li>
            <li>cs</li>
            <li>cs</li>
            <li>cs</li>
            <li>cs</li>
        </ul>
        <section class="notice">
            <i class="loading"></i>
        </section>
    </section>
</section>
<script type="application/javascript" src="js/zepto.js"></script>
<script type="application/javascript" src="js/alloy_touch.js"></script>
<script type="application/javascript" src="js/transform.js"></script>
<script>
    document.addEventListener('touchmove', function(e) {
        e.preventDefault();
    }, false);
    var headHeight = window.innerWidth * 500 / 750;
    var $content = $(".content"),
        target = $content[0];
    var $coverImg = $(".head-cover span"),
        copyImg = $coverImg[0];
    var $headImg = $(".headImg span");
    $coverImg.attr("style",$headImg.attr("style"));
    Transform(target);
    Transform(copyImg);
    var at = new AlloyTouch({
        touch: ".main", //反馈触摸的dom
        vertical: true, //不必需，默认是true代表监听竖直方向touch
        target: target, //运动的对象
        property: "translateY", //被滚动的属性
        sensitivity: 1, //不必需,触摸区域的灵敏度，默认值为1，可以为负数
        factor: 1, //不必需,默认值是1代表touch区域的1px的对应target.y的1
        min: window.innerHeight - $('.content').height(), //不必需,滚动属性的最小值
        max: 0, //不必需,滚动属性的最大值
        spring: false, //不必需,是否有回弹效果。默认是true
        inertia: true, //不必需,是否有惯性。默认是true
        topDis: '.3',
        bottomDis: '.5',
        bottomMax: '200',
        touchStart: function(value) {
            $('.notice').addClass('active');
        },
        touchMove: function(value) {},
        touchEnd: function(value) {},
        animationEnd: function(value) {
            $('.notice').removeClass('active');
        },
        change: function(value) {
            if (value>0) {
                $coverImg.show();
                $headImg.hide();
                copyImg.scaleX = copyImg.scaleY = (headHeight + value) / headHeight;
            } else {
                $coverImg.hide();
                $headImg.show();
            }
        }
    })
</script>
</body>
</html>